<!--
 * @Description:
 * @Author: Morgan
 * @Date: 2021-06-24 17:07:01
 * @LastEditors: Morgan
 * @LastEditTime: 2021-06-29 20:00:52
-->
<template>
  <div>
    <!-- {{logData}} -->
    <el-table
      v-loading="loading"
      :data="logData"
      stripe
      style="width: 100%"
    >
      <el-table-column
        type="index"
        label="序号"
        width="120"
      />
      <el-table-column
        prop="realname"
        label="访问人真实姓名"
        width="180"
      />
      <el-table-column
        prop="method"
        label="访问方式"
        width="180"
      />
      <el-table-column
        prop="content"
        label="路径"
      />
      <el-table-column
        label="访问时间"
        width="200"
      >
        <template slot-scope="scope">
          {{ moment(scope.row.logTime).format("YYYY-MM-DD hh:mm:ss") }}
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination-div">
      <el-pagination
        :current-page="params.page"
        :page-sizes="[10, 50, 100, 150, 200]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>

import { pageQuery } from '@/api/log'
import moment from 'moment'

export default {
  data() {
    return {
      logData: [],
      // 分页参数
      params: {
        page: 1,
        pageSize: 10
      },
      total: 0,
      loading: false
    }
  },
  computed: {},
  watch: {
    params: {
      handler() {
        this.queryLogData()
      },
      deep: true
    }
  },
  created() {
    this.queryLogData()
  },
  mounted() {},
  methods: {
    moment,
    async queryLogData() {
      this.loading = true
      const temp = {
        ...this.params
      }
      const res = await pageQuery(temp)
      this.loading = false
      this.logData = res.data.list
      this.total = res.data.total
    },
    // 每页显示的条数发生变化时的处理程序
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.params = {
        pageSize: val,
        page: 1
      }
    },
    // 当前页码发生变化时的事件处理程序
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.params.page = val
    }
  }
}
</script>
<style scoped>

</style>
